<template>
<div class="detail">
     <div class="background">
      <i class="el-icon-back icon" @click="tofind"></i>
       <img :src="img" alt="">
       <div class="info"><img :src="avatar" alt=""> 
        <p>{{name}}</p>
        <p>
       <span>关注 {{follows}}   </span>
       <span>   粉丝 {{followeds}}</span>
        </p>
        <div class="level"><span>Lv {{info.level}}</span></div>
       </div>
      </div>   
      <div class="list"> 
        <div class="list-item" v-for="(item, index) in detail" :key='index'>
          <img :src="item.coverImgUrl" alt="">
          <h5>{{item.name}}</h5>
          <p>{{item.trackCount}}首,播放{{item.playCount}}次</p>
        </div>
      </div>
 </div>
</template>

<script>
import '@/assets/normalize.css'
import axios  from "axios";
import { Host } from '../api/common'
import '../../node_modules/bootstrap/dist/css/bootstrap.css'
export default {
  data(){
    return{
      info:{},
      id:this.$route.params.id,
      detail:[],
      img:'',
      avatar:'',
      name:'',
      follows:'',
      followeds:''
    }
  },
  created(){
    console.log(this.id)
    this.getinfo()
    this.getdetail()
  },
  methods:{
    getinfo(){
      axios.get(Host+'/user/detail?uid='+this.id).then(res=>{
       /*  console.log(res)  */
        this.info=res.data
        this.img=res.data.profile.backgroundUrl
        this.avatar=res.data.profile.avatarUrl
        this.name=res.data.profile.nickname
        this.follows=res.data.profile.follows
        this.followeds=res.data.profile.followeds
      })
    },
    getdetail(){
      const cookie= window.sessionStorage.getItem('cookie')
      axios.get(Host+'/user/playlist?uid='+this.id).then(res=>{
      /*   console.log(res) */
        this.detail=res.data.playlist
      })
    },
    tofind(){
      this.$router.push('/find')
    }
  }

}
</script>

<style lang="less" scoped>
.detail {
  position: absolute;
  width: 100%;
 /*  background-color:aquamarine; */
  height:100%;
  top: 0;
}
.background{
  position: relative;
  height: 220px;
  width: 100%;
}
.background img{
  width: 100%;
  height: 220px;
  margin: 0 0;
  /* margin-left: -40px; */
}
.background .info img{
  position: absolute;
  left: 30px;
  top: 60px;
  height: 70px;
  width: 70px;
  border-radius: 35px;
  background-color: #ccc;
}
.background .info p{
  position: absolute;
  top: 140px;
  left: 30px;
  color: black;
}
.background .info p:nth-of-type(2){
  position: absolute;
  top: 170px;
  left: 30px;
  color: black;
}
.level span{
  position: absolute;
  top: 190px;
  left: 120px;
  height: 20px;
  width: 40px;
  border-radius: 10px;
  background-color: #ccc;
  font-size: 12px;
}
.background .icon{
  position: absolute;
  top: 0;
  left: 15px;
  font-size: 30px;
}
.list{
  margin: 15px 0;
  width: 100%;
}
.list .list-item{
  position: relative;
  height: 70px;
  /* background-color: blueviolet; */
}
.list .list-item img{
  position: absolute;
  height: 60px;
  width: 60px;
  
  top: 5px;
  border-radius: 5px;
  left: 10px;
}
.list .list-item h5{
  position: absolute;
  left: 85px;
  top: 5px;
  width: 80%;
  
  font-size: 17px;
  color: black;
  text-align: left;
}
.list .list-item p{
  position: absolute;
  left: 85px;
  top: 35px;
  width: 80%;
  
  text-align: left;
}
</style>